<script setup>
import {onMounted, ref, watch} from "vue"
import {Refresh, Search} from "@element-plus/icons-vue"
import { operationLogPageList } from '@/api/system/log.js'

defineOptions({
  name: '/system/log/operate'
})

//搜索类
const search = ref({
  username: "",
  dateRange: "",
  startDate: "",
  endDate: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

//监听属性
watch(() => search.value.dateRange, (newVal) => {
  if (newVal instanceof Array && newVal.length > 0) {
    search.value.startDate = newVal[0]
    search.value.endDate = newVal[1]
  } else {
    search.value.startDate = ""
    search.value.endDate = ""
  }
})

//表单实例
const searchFormRef = ref(null)

//操作日志数据
const operateLogData = ref([])

//分页列表请求
const requestPageList = () => {
  let query = {...search.value}
  query.dateRange = ''
  operationLogPageList(query).then(resp => {
    search.value.total = Number.parseInt(resp.data.total)
    operateLogData.value = resp.data.data
  })
}

onMounted(() => {
  requestPageList()
})

//监听重置事件
const onReset = () => {
  search.value.pageNum = 1
  searchFormRef.value.resetFields()
  search.value.startDate = ''
  search.value.endDate = ''
  requestPageList()
}


//监听搜索事件
const onSearch = () => {
  requestPageList()
}

//处理当前页改变事件
const handleCurrentChange = (currentPage) => {
  search.value.pageNum = currentPage
  requestPageList()
}
</script>

<template>
<div class="cb-main-container">
  <div class="cb-common-box search-box">
    <el-form :model="search" inline ref="searchFormRef" size="large">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="search.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="日期" prop="dateRange">
        <el-date-picker
            v-model="search.dateRange"
            type="daterange"
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="Refresh" @click="onReset">重置</el-button>
        <el-button icon="Search" type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="cb-common-box main-box">
    <el-table class="cb-table-box" size="large" :data="operateLogData" empty-text="暂无数据">
      <el-table-column type="index" width="50" />
      <el-table-column property="username" label="用户名" />
      <el-table-column property="moduleName" label="模块名" />
      <el-table-column property="eventName" label="事件" />
      <el-table-column property="ip" label="IP" />
      <el-table-column property="region" label="区域" />
      <el-table-column property="costTime" label="耗时">
        <template #default="scope">
          {{ scope.row.costTime}}ms
        </template>
      </el-table-column>
      <el-table-column property="createTime" label="操作时间" />
    </el-table>
    <el-pagination background layout="prev, pager, next" :current-page="search.pageNum" :total="search.total" style="margin-top: 16px" @current-change="handleCurrentChange" />
  </div>
</div>
</template>

<style scoped lang="scss">
.cb-main-container {
  flex-direction: column;
}
</style>
